<template>
	<view class="container-refund">
		<view class="order">
			<view class="order-titel">订单信息</view>
			<view class="order-list">
				<view class="order-msg">
					<text>订单号</text>
					<text>{{ orderMsg.order_no }}</text>
				</view>
				<view class="order-msg">
					<text>支付金额</text>
					<text class="amount">￥{{ orderMsg.amount }}</text>
				</view>
				<view class="order-msg">
					<text>已退款金额</text>
					<text class="refund-amount">￥{{ orderMsg.refund_amount }}</text>
				</view>
			</view>
		</view>
		<view class="refund">
			<view class="refund-titel">申请退款</view>
			<view class="refund-list">
				<view class="refund-msg">
					<text>金额</text>
					<input type="digit" v-model="refund" class="refund-input" placeholder="请输入金额" maxlength="5"
						@blur="getRefund" />
				</view>
			</view>
		</view>
		<view class="textarea">
			<textarea class="textarea-text" v-model="userText" style="line-height: 1.5" placeholder="请输入退款原因"
				maxlength="200" @input="getText" />
		</view>
		<view class="center">
			<button @click="getbut" class="refund-but">申请退款</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import { uniFetch } from '../../api/uni-fetch';
	const orderMsg = ref({});
	const refund = ref('');
	const phone = ref('');
	const userText = ref('');

	uni.setNavigationBarColor({
		frontColor: '#000000',
		backgroundColor: '#ffffff',
	});

	function getRefund(e) {
		let reg = /^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,3})?$/;
		let val = orderMsg.value.amount - orderMsg.value.refund_amount;
		if (!reg.test(refund.value) || refund.value > orderMsg.value.amount) {
			uni.showToast({
				title: '输入的金额不能大于实际支付金额',
				icon: 'none'
			});
			setTimeout(() => {
				refund.value = '';
			}, 2000);
		} else if (orderMsg.value.amount == orderMsg.value.refund_amount || refund.value > val) {
			uni.showToast({
				title: `当前最大退款金额` + val,
				icon: 'none',
				duration: 1500
			});
			setTimeout(() => {
				refund.value = '';
			}, 2000);
		}
	}

	function getphone(e) {
		let regs = /^(0086|\+86)?\s*1[3-9]\d{9}$/;
		if (!regs.test(phone.value)) {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			});
			setTimeout(() => {
				phone.value = '';
			}, 2000);
		}
	}

	function getText(e) {
		let val = e.target.cursor;
	}

	function getbut() {
		console.log(userText.value);
		uniFetch.post('/order/refund', {
				id: orderMsg.value.id,
				amount: refund.value,
				reason: userText.value
			})
			.then(
				(res) => {
					refund.value = '';
					userText.value = '';
					uni.showToast({
						title: '退款订单已提交',
						icon: 'none'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/subpkg/orderList/orderList'
						});
					}, 2000);
				},
				(reject) => {
					uni.showToast({
						title: '请输入金额和退款原因',
						icon: 'none'
					});
					console.log(reject, '退款报错');
				}
			);
	}

	onLoad((option) => {
		console.log(option);
		orderMsg.value = JSON.parse(option.order);
	});
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.order-titel {
		height: 77rpx;
		margin: 0 32rpx;
		line-height: 77rpx;
		color: #a1a1a1;
	}

	.order-list {
		padding-left: 32rpx;
		font-size: 32rpx;
		border-top: 1rpx solid #e2e2e2;
		border-bottom: 1rpx solid #e2e2e2;
		background: #fff;

		.order-msg {
			height: 90rpx;
			line-height: 90rpx;
			color: #000;

			text:nth-child(1) {
				width: 210rpx;
				display: inline-block;
			}

			.amount,
			.refund-amount {
				font-size: 28rpx;
				color: #b9b9b9;
			}
		}

		.order-msg:nth-child(2),
		.order-msg:nth-child(3) {
			border-top: 1rpx solid #e2e2e2;
		}
	}

	.refund {
		.refund-titel {
			height: 77rpx;
			margin: 0 32rpx;
			line-height: 77rpx;
			color: #a1a1a1;
		}

		.refund-list {
			padding-left: 32rpx;
			font-size: 32rpx;
			border-top: 1rpx solid #e2e2e2;
			border-bottom: 1rpx solid #e2e2e2;
			background: #fff;
		}

		.refund-msg {
			height: 90rpx;
			line-height: 90rpx;
			color: #000;

			text:nth-child(1) {
				width: 210rpx;
				display: inline-block;
			}
		}

		.refund-msg:nth-child(2) {
			border-top: 1rpx solid #e2e2e2;
		}

		.refund-input {
			display: inline-block;
			vertical-align: middle;
		}
	}

	.refund-but {
		margin-top: 50rpx;
		color: #fff;
		font-size: 36rpx;
		width: 500rpx;
		background-image: linear-gradient(135deg, #ff9f00 10%, #ff7f00 100%);
		border-radius: 24rpx;
	}

	.textarea {
		margin-top: 60rpx;
		position: relative;
		line-height: 26rpx;
	}

	.textarea-text {
		padding: 20rpx;
		width: 710rpx;
		background: #fff;
		border-top: 1rpx solid #e2e2e2;
		border-bottom: 1rpx solid #e2e2e2;
		height: 350rpx;
		padding-bottom: 40rpx;
	}

	.text-msg {
		position: absolute;
		bottom: 15rpx;
		right: 20rpx;
		color: #b0b0b0;
		z-index: 10;
	}
</style>